<template>
    <view>		
		<view class="uni-easyinput radius"  :style="'color:'+propTextColor+';background:'+propBgColor+';'">
			<view class="uni-easyinput__content">
				<image class="content-clear-icon"  :type="propIcon" :color="propIconColor" @click="search_icon_event" size="22" src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/86d1e6761c154408a9e97b817c0311e9.png" mode="widthFix"></image>
				<!-- <uni-icons class="content-clear-icon" :type="propIcon" :color="propIconColor" @click="search_icon_event" size="22"></uni-icons> -->
				<input type="text" confirm-type="search" class="uni-easyinput__content-input":placeholder="propPlaceholder" :placeholder-class="propPlaceholderClass" :value="propDefaultValue" @confirm="search_input_event"/>
				<!-- <uni-icons class="content-clear-icon" :type="suffixIcon" :color="suffixIconColor" @click="search_suffix_icon_event" size="22"></uni-icons> -->
				<!-- <image  class="content-clear-img" :type="suffixIcon" :color="suffixIconColor" @click="search_suffix_icon_event" size="22" src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/472d68df21a146cca01a1520ad0e7f82.png" mode="widthFix"></image> -->
			</view>
		</view>
    </view>
</template>
<script>
    const app = getApp();
    export default {
        data() {
            return {};
        },
        components: {},
        props: {
            propUrl: {
            	type: String,
            	default: '/pages/goods_ring/goods_ring'
            },
            propFormName: {
            	type: String,
            	default: 'keywords'
            },
            propPlaceholder: {
            	type: String,
            	default: '其实搜索很简单 ^_^!'
            },
            propDefaultValue: {
            	type: String,
            	default: ''
            },
            propPlaceholderClass: {
            	type: String,
            	default: 'cr-grey'
            },
            propTextColor: {
            	type: String,
            	default: '#666'
            },
            propBgColor: {
            	type: String,
            	default: '#f0f0f0'
            },
            propBrColor: {
            	type: String,
            	default: ''
            },
            propIsRequired: {
            	type: Boolean,
            	default: true
            },
            propIsOnEvent: {
            	type: Boolean,
            	default: false
            },
            propIcon: {
            	type: String,
            	default: 'search'
            },
			suffixIcon: {
				type: String,
				default: 'scan'
			},
            propIconColor: {
            	type: String,
            	default: '#b7b7b7'
            },
            suffixIconColor: {
            	type: String,
            	default: '#b7b7b7'
            },
            propIsIconOnEvent: {
            	type: Boolean,
            	default: false
            },
            suffixIconOnEvent: {
            	type: Boolean,
            	default: false
            },
        },
        methods: {
            // 搜索事件
            search_input_event(e) {
                var keywords = e.detail.value || null;
                
                // 是否验证必须要传值
                if (this.propIsRequired && keywords == null) {
					uni.showToast({
						title:"请输入搜索关键字"
					})
                    return false;
                }
                
                // 是否回调事件
                if(this.propIsOnEvent) {
                    this.$emit('onsearch', keywords);
                } else {
                    // 进入搜索页面
                    uni.navigateTo({
                        url: this.propUrl+'?'+this.propFormName+'=' + keywords
                    });
                }
            },
            
            // icon事件
            search_icon_event(e) {
                // 是否回调事件
                if(this.propIsIconOnEvent) {
                    this.$emit('onicon', {});
                }
            },         
            // icon事件
			search_suffix_icon_event() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const filePath = res.tempFilePaths[0];
						this.uploadImage(filePath);
					}
				});
			},
			uploadImage(filePath) {
				let url = app.globalData.get_request_url("useravatarupload");
				uni.uploadFile({
					url: url,
					filePath: filePath,
					name: 'file',
					formData: {},
					success: (res) => {
						console.log(res, '上传');
						if (res.statusCode == 200) {
							var data = typeof res.data == 'object' ? res.data : JSON.parse(res.data);
							if (data.code == 200) {
								console.log(data,'data');
								// var oss_id = data.data.oss_id;
								// // self.imageId.push(oss_id);
								// if (self.imageId) {
								// 	self.imageId += ',' + oss_id;
								// } else {
								// 	self.imageId = oss_id;
								// }
							} else {
								uni.showToast({
									title: data.msg
								})
							}
						}
					}
				})
			}
        }
    };
</script>
<style>
	.uni-easyinput {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		flex: 1;
		position: relative;
		text-align: left;
		color: #333;
		font-size: 13px;
		background-color: transparent !important;
		border-radius: 40rpx !important;
	}
	
	.uni-easyinput__content {
		flex: 1;
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		box-sizing: border-box;
		// min-height: 36px;
		/* #endif */
		flex-direction: row;
		align-items: center;
		// 处理border动画刚开始显示黑色的问题
		border-color: #fff;
		transition-property: border-color;
		transition-duration: 0.3s;
		background-color: transparent !important;
		color: #e6c676 !important;
	}
	
	.uni-easyinput__content-input {
		/* #ifndef APP-NVUE */
		width: auto;
		/* #endif */
		position: relative;
		overflow: hidden;
		flex: 1;
		line-height: 1;
		font-size: 14px;
		height: 35px;
		background-color: transparent !important;
		border-radius: 40rpx !important;
		// min-height: 36px;
	}
	
	.content-clear-icon {
		width: 25rpx;
		padding: 0 5px;
	}
	.content-clear-img{
		width: 40rpx;
		padding: 0 5px;
	}
	
	.label-icon {
		margin-right: 5px;
		margin-top: -1px;
	}
</style>